<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>API_MANAGER</title>
<style type="text/css">
table tr td {
	word-break: break-all;
}
</style>
</head>

<body>
	<jsp:include page="/common/head.jsp"></jsp:include>
	<div style="background: #edecec;">
		<div style="width: 25%; float: left; height: auto;">
			<div>
				<jsp:include page="/tree.jsp"></jsp:include>
			</div>
		</div>
		<div id="contentDiv" style="width: 75%; float: left; height: auto;">

			<form method="post" id="form1" action="<%=path%>/apiAction!update">
				<table>
					<tr>
						<td>接口详情</td>
						<td><c:if test="${sessionScope.user.issuper == 1 }">
								<input type="button" id="btn" value="编辑"
									onclick="editContent(value)" />
								<input type="button" id="btndel" value="删除" />
							</c:if></td>
					</tr>
					<tr>
						<td>名称</td>
						<td><input type="text" id="cname" style="width: 240px;"
							name="apis.cname" value="${api.cname }" /> <input type="hidden"
							id="apiid" name="apis.id" value="${api.id }" /> <input
							type="hidden" id="aid" name="cate.aid" value="${cate.aid }" /> <input
							type="hidden" id="pid" name="cate.pid" value="${cate.pid }" /></td>
					</tr>
					<tr>
						<td>描述</td>
						<td><input style="width: 500px;" type="text"
							name="apis.cdesc" value="${api.cdesc }" /></td>
					</tr>
					<tr>
						<td>开发人员</td>
						<td><select name="apis.devuser" id="apisdevuser"
							style="width: 100px;">
								<c:forEach var="user" items="${users}">
									<option
										<c:if test="${user.id==api.devuser}">selected="selected"</c:if>
										value="${user.id }">${user.niceName}</option>
								</c:forEach>
						</select></td>
					</tr>
					<tr>
						<td>类型</td>
						<td><select name="apis.type" id="apistype"
							style="width: 100px;">
								<option value="POST"
									<c:if test="${api.type=='POST'}">selected="selected"</c:if>>POST</option>
								<option value="GET"
									<c:if test="${api.type=='GET'}">selected="selected"</c:if>>GET</option>
						</select></td>
					</tr>
					<tr>
						<td>请求URL</td>
						<td><input type="text" id="url" style="width: 500px;"
							name="apis.url" value="${api.url }" /> <input type="button"
							id="btntest" value="测试接口" /></td>
					</tr>
					<tr>
						<td>状态</td>
						<td><select name="apis.isok" id="apisisok"
							style="width: 180px;">
								<option value="ok"
									<c:if test="${api.isok=='ok'}">selected="selected"</c:if>>接口文档撰写完成</option>
								<option value="no"
									<c:if test="${api.isok=='no'}">selected="selected"</c:if>>接口文档撰写没完成</option>
								<option value="dev"
									<c:if test="${api.isok=='dev'}">selected="selected"</c:if>>接口开发阶段</option>
								<option value="over"
									<c:if test="${api.isok=='over'}">selected="selected"</c:if>>接口开发完成</option>
								<option value="testno"
									<c:if test="${api.isok=='testno'}">selected="selected"</c:if>>口开发完成没有自测</option>
								<option value="testok"
									<c:if test="${api.isok=='testok'}">selected="selected"</c:if>>接口开发完成已经自测完成</option>
						</select></td>
					</tr>
				</table>
				<br />
				<div>
					<br> <br>请求参数列表<br>
					<table id="tab" border="1" width="100%">
						<tr>
							<td width="40px">序号</td>
							<td>名称</td>
							<td>描述</td>
							<td>类型</td>
							<td>是否必填</td>
							<td>备注</td>
							<td>操作</td>
						</tr>
						<c:forEach var="apipra" items="${apipralist }" varStatus="vst">
							<tr id="${vst.index+1}">
								<td width="40px">${vst.index+1}</td>
								<td><input type="text"
									name="apis.apipras[${vst.index}].cname" id="cname${vst.index}"
									value="${apipra.cname}" /></td>
								<td><input type="text"
									name="apis.apipras[${vst.index}].cdesc" id="cdesc${vst.index}"
									value="${apipra.cdesc}" /></td>
								<%-- 					            <td><input type="text" name="apis.apipras[${vst.index}].type" id="type${vst.index}" value="${apipra.type}" /></td> --%>
								<td><select name="apis.apipras[${vst.index}].type">
										<option
											<c:if test="${apipra.type eq 'STRING'}">selected</c:if>
											value="STRING">String</option>
										<option <c:if test="${apipra.type eq 'INT'}">selected</c:if>
											value="INT">int</option>
										<option <c:if test="${apipra.type eq 'LONG'}">selected</c:if>
											value="LONG">Long</option>
											<option <c:if test="${apipra.type eq 'DATE'}">selected</c:if>
											value="DATE">Date</option>
											<option <c:if test="${apipra.type eq 'DECIMAL'}">selected</c:if>
											value="DECIMAL">Decimal</option>
										<option
											<c:if test="${apipra.type eq 'DOUBLE'}">selected</c:if>
											value="DOUBLE">Double</option>
										<option <c:if test="${apipra.type eq 'JSON'}">selected</c:if>
											value="JSON">JSON</option>
										<option <c:if test="${apipra.type eq 'JSONARRAY'}">selected</c:if>
											value="JSONARRAY">JSONArray</option>
								</select></td>
								<td><input type="checkbox"  name="apis.apipras[${vst.index}].required" <c:if test="${apipra.required eq 'on'}">checked</c:if>></td>
								<td><textarea type="text"
									name="apis.apipras[${vst.index}].cbak" id="cbak${vst.index}"
									 >${apipra.cbak}</textarea></td>
								<td><a href="javascript:void(0)"
									onclick="deltr(${vst.index+1})">删除</a></td>
							</tr>
						</c:forEach>
					</table>
					<div style="border: 2px; border-color: #00CC00; margin-top: 20px">
						<input type="button" id="butHead" value="增加 head" />
						
						<input type="button" id="butBody" value="增加 body" />
					</div>
					<br> <br>响应参数列表 <br>
					<textarea id="resp" name="apis.callbak" rows="10" cols="100"
						style="resize: none;">${api.callbak }</textarea>
					<br>
					<br> <a href="javascript:void(0)" id="save1"
						class="easyui-linkbutton">保存</a>
					<div style="color: red" id="message"></div>
					<br> <br>接口日志
					<hr>
					<c:forEach var="lj" items="${logJsps }">
						<table>
							<tr>
								<td>修改人:</td>
								<td>${lj.name }</td>
							</tr>
							<tr>
								<td>修改时间:</td>
								<td>${lj.timestr }</td>
							</tr>
							<tr>
								<td colspan="2">修改记录:<br>
									<div>${lj.body }</div>
								</td>
							</tr>
						</table>
					</c:forEach>
				</div>

			</form>
		</div>


	</div>

	<script type="text/javascript">
$(document).ready(function(){
	$("#jspname").val("apieditandinfo");
	
	$("#add1").click(function(){
		window.location.href="<%=path%>/apiAction!gotoapiadd?cate.aid="+$("#aid").val()+"&cate.pid="+$("#pid").val();
	});
	
	$("#go1").click(function(){
		window.location.href="<%=path%>/cateAction!cate?cate.pid="+$("#pid").val();
	});
	
	//<tr/>居中
    $("#tab tr").attr("align","center");
    
    //增加<tr/>
    $("#butHead").click(function(){
        var _len = $("#tab tr").length; 
        $("#tab").append("<tr id="+_len+" align='center'>"
                            +"<td>"+_len+"</td>"
                            +"<td><input type='text' name='apis.apipras["+(_len-1)+"].cname' id='cname"+(_len-1)+"' value='head.'/></td>"
                            +"<td><input type='text' name='apis.apipras["+(_len-1)+"].cdesc' id='cdesc"+(_len-1)+"'/></td>"
                            //+"<td><input type='text' name='apis.apipras["+(_len-1)+"].type' id='type"+(_len-1)+"'/></td>"
                            +"<td>"
                            +"<select name='apis.apipras["+(_len-1)+"].type' id='type"+(_len-1)+"'>"
                            +"<option value='STRING'>String</option>"
                            +"<option value='INT'>int</option>"
                            +"<option value='DATE'>Date</option>"
                            +"<option value='DECIMAL'>decimal</option>"
                            +"<option value='LONG'>Long</option>"
                            +"<option value='DOUBLE'>Double</option>"
                            +"<option value='DECIMAL'>decimal</option>"
                            +"<option value='JSON'>JSON</option>"
                            +"<option value='JSONARRAY'>JSONArray</option>"
                            +"</select>"
                            +"</td>"
                            +"<td><input type='checkbox' name='apis.apipras["+(_len-1)+"].required' id='required"+(_len-1)+"'></td>"
                            +"<td>"
                           +"<input type='text' name='apis.apipras["+(_len-1)+"].cbak' id='cbak"+(_len-1)+"'/>"
                            +"</td>"
                            +"<td><a href=\"javascript:void(0)\" onclick=\'deltr("+_len+")\'>删除</a></td>"
                        +"</tr>");            
    });
    
    $("#butBody").click(function(){
        var _len = $("#tab tr").length; 
        $("#tab").append("<tr id="+_len+" align='center'>"
                            +"<td>"+_len+"</td>"
                            +"<td><input type='text' name='apis.apipras["+(_len-1)+"].cname' id='cname"+(_len-1)+"' value='body.'/></td>"
                            +"<td><input type='text' name='apis.apipras["+(_len-1)+"].cdesc' id='cdesc"+(_len-1)+"'/></td>"
                            //+"<td><input type='text' name='apis.apipras["+(_len-1)+"].type' id='type"+(_len-1)+"'/></td>"
                            +"<td>"
                            +"<select name='apis.apipras["+(_len-1)+"].type' id='type"+(_len-1)+"'>"
                            +"<option value='STRING'>String</option>"
                            +"<option value='INT'>int</option>"
                            +"<option value='DATE'>Date</option>"
                            +"<option value='DECIMAL'>decimal</option>"
                            +"<option value='LONG'>Long</option>"
                            +"<option value='DOUBLE'>Double</option>"
                            +"<option value='DECIMAL'>decimal</option>"
                            +"<option value='JSON'>JSON</option>"
                            +"<option value='JSONARRAY'>JSONArray</option>"
                            +"</select>"
                            +"</td>"
                            +"<td><input type='checkbox' name='apis.apipras["+(_len-1)+"].required' id='required"+(_len-1)+"'></td>"
                            +"<td>"
                           +"<input type='text' name='apis.apipras["+(_len-1)+"].cbak' id='cbak"+(_len-1)+"'/>"
                            +"</td>"
                            +"<td><a href=\"javascript:void(0)\" onclick=\'deltr("+_len+")\'>删除</a></td>"
                        +"</tr>");            
    });
    
    $("#save1").click(function(){
    	var cname = $("#cname").val(); 
    	var url = $("#url").val(); 
		if(cname == ''){
			$("#message").html('接口名称不能为空！');
			return false;
		}
		if(url == ''){
			$("#message").html('请求URL不能为空！');
			return false;
		}
		$.ajax({
            type: 'POST',
            dataType: 'html',
            url: '<%=path%>/apiAction!updateApi',
            data: $('#form1').serialize(),
            success: function (data) {
            	if(data == 'success'){
            		window.location.href="<%=path%>/apiAction!gotoapieditandinfo?api.id="+$("#apiid").val()+"&cate.aid="+$("#aid").val()+"&cate.pid="+$("#pid").val();
            	}else{
            		$("#message").html(data);
            	}
            },
            error: function(data) {
                //alert("error:"+data.responseText);
            	$("#message").html(data);
            }

        });
	});
    
    $("#contentDiv :text").attr('disabled','disabled');
    $("#contentDiv a").css('display','none');
    $("#contentDiv select").attr('disabled','disabled');
    $("#contentDiv #save1").css('display','none');
    $("#contentDiv #but").css('display','none');
    $("#resp").attr('readonly','readonly');
    
    $("#btntest").click(function(){
    	window.location.href="<%=path%>/apiAction!gototest?api.id="+$("#apiid").val()+"&cate.aid="+$("#aid").val()+"&cate.pid="+$("#pid").val();
    });
    
    $("#btndel").click(function(){
    	var deleteId = $("#apiid").val();
    	var aid = $("#aid").val();
    	var pid = $("#pid").val();
    	$.messager.confirm('删除提示', '确定要删除该接口吗？', function(r){
			if (r){
				$.post("<%=path%>/apiAction!destroy",{'deleteId':deleteId},function(result){
				    if(result == 'success'){
				    	window.location.href="<%=path%>/apiAction!gotoapiedit?cate.aid="+aid+"&cate.pid="+pid;
				    }
				},"text");
			}
		});
		return false;
    });
    
});
//删除<tr/>
var deltr =function(index)
{
    var _len = $("#tab tr").length;
    $("tr[id='"+index+"']").remove();//删除当前行
    for(var i=index,j=_len;i<j;i++)
    {
    	var next = i+1;
    	if(next<_len){
    		$("tr[id=\'"+next+"\']")
            .replaceWith("<tr id="+i+" align='center'>"
                            +"<td>"+i+"</td>"
                            +"<td><input type='text' name='apis.apipras["+(i-1)+"].cname' id='cname"+(i-1)+"'  value='" + $('#cname'+i).val() + "'/></td>"
                            +"<td><input type='text' name='apis.apipras["+(i-1)+"].cdesc' id='cdesc"+(i-1)+"' value='" + $('#cdesc'+i).val() + "'/></td>"
                            +"<td><input type='text' name='apis.apipras["+(i-1)+"].type' id='type"+(i-1)+"'  value='" + $('#type'+i).val() + "'/></td>"
                            +"<td><input type='text' name='apis.apipras["+(i-1)+"].cbak' id='cbak"+(i-1)+"'  value='" + $('#cbak'+i).val() + "'/></td>"
                            +"<td><a href=\"javascript:void(0)\" onclick=\'deltr("+i+")\'>删除</a></td>"
                        +"</tr>");
    	}
        
    }    
    
}

function editContent(value){
	if('编辑'==value){
		$("#contentDiv :text").removeAttr('disabled','disabled');
	    $("#contentDiv a").css('display','');
	    $("#contentDiv select").removeAttr('disabled','disabled');
	    $("#contentDiv #save1").css('display','');
	    $("#contentDiv #but").css('display','');
		$("#resp").removeAttr('readonly','readonly');
	    $("#btn").val('关闭编辑');
	}else{
		$("#contentDiv :text").attr('disabled','disabled');
	    $("#contentDiv a").css('display','none');
	    $("#contentDiv select").attr('disabled','disabled');
	    $("#contentDiv #save1").css('display','none');
	    $("#contentDiv #but").css('display','none');
		$("#resp").attr('readonly','readonly');
	    $("#btn").val('编辑');
	}
	
}
</script>
</body>
</html>